<template>
	<view class="club">
		<uv-navbar placeholder autoBack bgColor="#CA1C1D">
			<template v-slot:left>
				<view class="left_slot">
					<image src="@/static/images/back.png"></image>
				</view>
			</template>
			<template v-slot:right>
				<view class="right_slot">
					<image src="@/static/images/c1.png"></image>
					<input type="text" placeholder="搜索关键词" v-model="name">
					<view class="submit" @click="submit">搜索</view>
				</view>
			</template>
		</uv-navbar>
		<view class="content">
			<view class="list">
				<view class="item" v-for="item in _this.list">
					<image :src="item.thumbnail" class="cover"></image>
					<view class="item_view">
						<view class="info_view">
							<view class="name">{{item.name}}</view>
							<view class="link">
								<!-- <image src="@/static/images/address.png"></image> -->
								<text>{{item.synopsis}}</text>
							</view>
						</view>
						<view class="btn_view">
							<view class="btn" @click="navigate(item)">点击进入</view>
							<!-- <view class="btn" @click="router(`/pages/shop/service?id=${item.id}`)">点击进入</view> -->
						</view>
					</view>
				</view>
				<uv-load-more :status="_this.loadmore_status" line @loadmore="loadmore" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		clubIndex
	} from "@/request/api";
	import {
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		ref
	} from "vue";
	import useBase from "@/hooks/useBase.js";
	import useList from "@/hooks/useList.js";
	const {
		router
	} = useBase();
	const {
		_this
	} = useList();

	const name = ref("");
	const getList = async () => {
		let {
			list
		} = await clubIndex({
			name: name.value,
			page: _this.page,
			limit: _this.limit
		});
		_this.last_page = list.last_page;
		list = list.list;
		_this.list = _this.page == 1 ? list : [..._this.list, ...list];
		_this.loadmore_status = _this.last_page == _this.page ? 'nomore' : 'loadmore';
	};
	getList();
	const loadmore = () => {
		if (_this.page >= _this.last_page) return;
		_this.page++;
		getList();
	};
	onReachBottom(() => loadmore());

	const submit = () => {
		_this.list = [];
		_this.page = 1;
		getList();
	};

	const navigate = (item) => {
		if (item.bind_store > 0) {
			router(`/pages/shop/index?id=${item.bind_store}`)
		} else {
			router(`/pages/shop/service?id=${item.id}`)
		};
	};
</script>

<style scoped lang="scss">
	.club {
		min-height: 100vh;
		background-color: $background;

		.left_slot {
			image {
				width: 43rpx;
				height: 36rpx;
			}
		}

		.right_slot {
			width: 586rpx;
			height: 68rpx;
			border-radius: 34rpx;
			padding: 0 28rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 30rpx;
				height: 30rpx;
			}

			input {
				flex: 1;
				color: #999999;
				font-size: 26rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
			}

			.submit {
				color: #CA1C1D;
				font-size: 26rpx;
			}
		}

		.content {
			padding: 20rpx;
			box-sizing: border-box;

			.list {
				.item {
					border-radius: 16rpx;
					margin-bottom: 20rpx;
					padding: 20rpx 0 20rpx 20rpx;
					background: #FFFFFF;
					display: flex;

					.cover {
						width: 200rpx;
						height: 200rpx;
					}

					.item_view {
						flex: 1;
						padding: 10rpx 30rpx;
						box-sizing: border-box;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.info_view {
							.name {
								color: #000000;
								font-size: 32rpx;
								font-weight: bold;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
							}

							.link {
								padding-top: 16rpx;
								box-sizing: border-box;
								display: flex;
								align-items: center;

								image {
									width: 24rpx;
									height: 24rpx;
								}

								text {
									color: #51565D;
									font-size: 20rpx;
								}
							}
						}

						.btn_view {
							display: flex;
							justify-content: flex-end;

							.btn {
								width: 150rpx;
								height: 50rpx;
								line-height: 50rpx;
								text-align: center;
								color: #FFFFFF;
								font-size: 24rpx;
								border-radius: 6rpx;
								background: #CA1C1D;
							}
						}
					}
				}
			}
		}
	}
</style>